<template>
  <div class="list">
    <p class="caini">猜你喜欢</p>
    <header>
      <section>
        <p @click="zonghe" :class="{ active: xiangx }">综合排序 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
        <p @click="xiaomax" :class="{ active: xiao }">销量最高&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
        <p @click="juwo" :class="{ active: ju }">距离最近&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
        <p style="margin-left: 10vw;">筛选&nbsp;</p>
      </section>
      <!-- <div>筛选<span class="iconfont icon-shaixuan"></span></div> -->
    </header>
    <div class="si">
      <span class="si1">年货节热卖&nbsp;&nbsp;&nbsp;</span>
      <span class="si1">津贴联盟&nbsp;&nbsp;&nbsp;</span>
      <span class="si1">满减优惠&nbsp;&nbsp;&nbsp;</span>
      <span class="si1">品质联盟</span>
    </div>
    <div
      class="good"
      @click="Chuanid(item.mtWmPoiId)"
      v-for="(item, index) in list"
      :key="index"
    >
      <div class="img-box">
        <img :src="item.picUrl" alt="" />
      </div>
      <div class="text">
        <div class="name" style="font-size: 3vw;">{{ item.name }}</div>
        <div class="price">{{ item.price }}</div>
        <div class="desc">{{ item.desc }}</div>
        <div class="info1">
          <van-icon class="star" name="star" />{{ item.wmPoiScore / 10 }} {{ item.monthSalesTip }}
        </div>
        <div>{{ item.minPriceTip }}&nbsp;&nbsp;{{ item.shippingFeeTip }}&nbsp;&nbsp;{{ item.deliveryTimeTip }}</div>
        <div>距离{{ item.distance }}</div>
        <div class="text-two " v-for="(item, index) in item.discounts2" :key="index">
            <p class="three">{{ item.info }}</p>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
//所有本地图片 必须通过import导入 以后才可以在 js 数据中使用( import导入的图片会自动转换为base64编码的字符串, 这个字符串唯一代表该图标 )
import { shop_list } from "../../../api/index";
import eventBus from "../../../utils/eventBus";
import { mai, juli } from "../../../utils/fangfa";
export default {
  data() {
    //定义响应式数据
    return {
      litt: [],
      list: [],
      dianpu: [],
      dianpu2: [],
      xiangx: true,
      xiao: false,
      ju: false,
    };
  },
  mounted() {
    shop_list({ count: 10 }).then((res) => {
      // console.log(res.data);
      this.list = res.data.list;
      this.litt=res.data.list
      // console.log(this.list2)
    });
    eventBus.$on("tranferData", (data) => {
      // console.log('接收到数据:', data );
      this.list = data;
    });
  },
  methods: {
    Chuanid(id) {
      console.log(id)
      this.$router.push("/xiangqing/" + id);
      
    },
    xiaomax() {
      mai(this.list);
      this.xiangx = false;
      this.ju = false;
      this.xiao = true;
    },
    juwo() {
      juli(this.list);
      this.ju = true;
      this.xiangx = false;
      this.xiao = false;
    },
    zonghe() {
      this.list = this.litt;
      this.xiangx = true;
      this.xiao = false;
      this.ju = false;
    },
  },
};
</script>

<style scoped>
.list {
  margin: 10px;
  height: auto;
}
.list .good {
  display: flex;
  height: auto;
  width: 100%;
  /* background-color: lightblue; */
  margin: 10px 0;
  border-radius: 5px;
}
.list .good .img-box {
  width: 120px;
  height: 100%;
  margin-right: 10px;
}
.list .good .img-box img {
  width: 100%;
  height: 100%;
}
.list .good .text {
  flex: 1;
  font-size: 1vw;
}
section {
  display: flex;
}
.active {
  color: red;
}

.caini{
  margin: 0px;
  font-weight: 900;
}

.si1{
    width:85px;
    height:30px;
    line-height:30px;
    background-color: rgb(246, 245, 245);
    font-size:14px;
    text-align:center;
}


.info1{
  color: orangered;
}


.text-two {
  float: left;
  height:18px;
  display: flex;
  margin-top:10px;
}
.three {
  margin: 0;
  position: relative;
  top: -5px;
  left: -6px;
  margin-left:5px;
  border: 1px solid red;
  padding: 6px 5px 6px 5px;
  font-size: 12px;
  height:9px;
  line-height:9px;
}
.text .name{
  
  font-weight: 900;
}
</style>